<template>
  <div class="main">
    <div class="header">
      <div>header-left</div>
      <div>header-right</div>
    </div>
    <div class="container">
      <div class="left">
        <div v-for="(item, index) in 100" :key="index">
          left{{item + index}}
        </div>
      </div>
      <div class="right">
        <el-button @click="toggleAnimation">滑入滑出</el-button>
        <div>
          <div class="box1">1231111</div>
          <div>
            <transition name="slide">
              <div v-if="show" class="box">
                <div>1213</div>
                <div>fasdsa</div>
              </div>
            </transition>
          </div>
          <Transition name="slide-fade">
            <div v-if="show" style="border: 1px solid darkgray">
              <img src="@/assets/img/1699603242106.png" />
              <span>xxxxgggxxxhellohellohellohellohello</span>
            </div>
          </Transition>
        </div>
        <el-button @click="handleC($event)">控制子组件</el-button>
        <HelloWorld :data-id="'8848'" class="aaaa" ref="hwRef" :msg="msg"
                    age="1"
                    name="2"
                    @click="change2" @aheihei="change1"
        />
        <div ref="abcRef" :data-id="'123'" @click="abc">测试属性</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { ref, onMounted, nextTick } from 'vue'
  import HelloWorld from '@/components/HelloWorld.vue'

  onMounted(() => {
    console.log(hwRef.value)
  })

  const show = ref(true)
  function toggleAnimation() {
    show.value = !show.value
  }

  const msg = ref("asd")
  const hwRef = ref(null)
  function handleC(e) {
    console.log(e)
    msg.value = "我变了阿白白"
    hwRef!.value!.changeShow()
  }

  function abc(e) {
    console.log('abc', e)
    console.log(hwRef.value)
  }

  function change1(e) {
    console.log(e)
  }

  function change2(e) {
    console.log(e)
  }

</script>
<style scoped>
  .main {
    width: 100%;
    height: 100%;
  }
  .main .header {
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    background-color: #3f720f;
  }
  .main .container {
    height: calc(100% - 60px);
    display: flex;
  }
  .container .left {
    overflow: auto;
    background-color: #c4cdd0;
    width: 300px;
    height: 100%;
  }
  .container .right {
    overflow: auto;
    background-color: #6986ea;
    flex: 1;
    height: 100%;
  }

  .box {
    width: 100px;
    height: 100px;
    background-color: red;
  }

  .slide-enter-active {
    animation: slideInRight 0.5s ease;
  }

  .slide-leave-active {
    animation: slideInRight 0.5s ease reverse;
  }

  @keyframes slideInRight {
    0% {
      transform: translateX(-200px);
    }
    100% {
      transform: translateX(0);
    }
  }

  .slide-fade-enter-active {
    transition: all 0.3s ease-out;
  }

  .slide-fade-leave-active {
    transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);
  }

  .slide-fade-enter-from,
  .slide-fade-leave-to {
    transform: translateX(20px);
    opacity: 0;
  }

</style>